<style type="text/css">
  li.on{background:#ccc;}
  .cat_list {
    background:#FFFFFF none repeat scroll 0 0;
    border:1px solid #97D7F2;
    height:273px;
    overflow-x:hidden;
    overflow-y:scroll;
    width:214px;
  }
  .cat_list li{
    color:#000000;
    cursor:pointer;
    height:22px;
    line-height:22px;
    padding-left:10px;
    width:170px;
  }
  .cat_list li span.edit{
    display:-moz-inline-box;
    display:inline-block;
    width:120px;
  }
  .cat_list a.del{
    color:red;
    font-size:10px;
  }
  .cat_box a.new_cat{
    color:blue;
  }
  .cat_box {
    float:left;
    height:275px;
    padding:10px 24px 10px 0;
    width:216px;
  }
</style>
<script type="text/javascript">
  cat1 = <%= @item_categories.blank? ? '[]' : @item_categories %>;
  
  $(function(){
    var cat1_html = "";
    $(cat1).each(function(){
      cat1_html += "<li id='"+this['item_category']['id']+"'><span class='edit'>"+
        this['item_category']['name']+"</span><a href='#' class='del'>删除</a>"+"</li>"
    });

    $('#cat1').append(cat1_html);
  });
</script>
<%=javascript_include_tag "admin/category" %>
<%=javascript_include_tag "admin/jeditable" %>
<%=javascript_include_tag "admin/jquery.json" %>

<%= render :partial => 'admin/shared/item_left_bar', :locals => { :on => 1 } %>

<div id="main">
  <div class="cat_box">
    <span>一级分类</span>
    <a href="#" style="margin-left:100px;" class="new_cat">添加分类</a>
    <div class="cat_list">
      <ul id="cat1" class="cat">
      </ul>
    </div>
  </div>

  <div class="cat_box">
    <span>二级分类</span>
    <a href="#" style="margin-left:100px;" class="new_cat">添加分类</a>
    <div class="cat_list">
      <ul id="cat2" class="cat">
      </ul>
    </div>
  </div>
</div>
